<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局示例</title>
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .side-bar{
            width: 20%;
            height: 100%;
            background-color: rgb(37,70,101);
            float: left;
        }
        .main{
            width: 80%;
            height: 100%;
            float: left;
        }
        .header{
            padding: 20px 15px;
        }
        .header, .personal{
            height: 200px;
        }
        .header .avatar{
            display: block;
            border: 5px solid #fff;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            width: 128px;
            height: 128px;
            border-radius: 50%;
        }
        .avatar img{
            max-width: 100%;
        }
        .side-bar .content{
            color: white;
        }
        .personal .content{
            width: 100%;
            margin: 10px auto 0 20px;
        }
        .personal .content span{
            color: #fff;
            font-family: "微软雅黑";
            line-height: 26px;
        }
        .evaluation{
            height: 200px;
            /*border: 2px solid #fff;*/
        }
        .evaluation .content{
            text-indent: 20px;
            padding: 5px 10px;
        }
        .name, .info{
            text-align: center;
            color: white;
            margin: 10px auto;
        }
        .per-header, .eva-header, .hob-header{
            height: 50px;
            background-color: rgb(91,155,213);
            color: white;
            text-align: center;
            line-height: 50px;
            letter-spacing: 10px;
        }
        .main{
            margin: 20px 0;
        }
        .main .education, .main .skill, .main .project, .main .honor{
            min-height: 150px;
            /*border: 2px solid #000;*/
        }
        .edu-header, .sk-header, .pro-header, .hon-header{
            margin-left: 20px;
            font-size: 20px;
            font-weight: bolder;
            padding-bottom: 10px;
            border-bottom: 1px solid #000;
        }
        .main .content{
            text-align: left;
            padding: 5px 30px;
        }
        .main .content p{
            margin: 7px auto;
        }
        .hobby .content table{
            width: 80%;
            margin: 5px auto;
            text-align: center;
        }
        .hobby .content span{
            display: inline-block;
            padding: 7px 20px;
        }
    </style>
</head>
<body>
    <div class="side-bar">
        <div class="header">
            <a href="" class="avatar">
                <img src="images/kobe.jpg" alt="" width="">
            </a>
            <div class="name">科比</div>
            <div class="info">NBA篮球巨星</div>
        </div>
        <div class="personal">
            <div class="per-header">个人简介</div>
            <div class="content">
                <span><i class="fa fa-user-o"></i> &nbsp;:&nbsp; 中共党员</span><br>
                <span><i class="fa fa-vcard-o"></i> &nbsp;:&nbsp; 1995.06.19</span><br>
                <span><i class="fa fa-map-marker"></i> &nbsp;:&nbsp; 山西 晋城</span><br>
                <span><i class="fa fa-phone"></i> &nbsp;:&nbsp; 15735177116</span><br>
                <span><i class="fa fa-envelope-o"></i> &nbsp;:&nbsp; 1271570224@qq.com</span><br>
            </div>
        </div>
        <div class="evaluation">
            <div class="eva-header">个人评价</div>
            <div class="content">
                热爱技术，工作踏实，态度积极，能够承受工作压力；不足之处是缺乏工作经验，但自学能力强，有强烈的求知欲，有独立解决分析、解决问题的能力，良好的团队合作意识；
            </div>
        </div>
        <div class="hobby">
            <div class="hob-header">兴趣爱好</div>
            <div class="content">
                <table>
                    <tbody>
                        <tr>
                            <td><span><i class="fa fa-laptop fa-2x"></i></span></td>
                            <td><span><i class="fa fa-soccer-ball-o fa-2x"></i></span></td>
                        </tr>
                         <tr class="hobby-name">
                            <td><span>计算机</span></td>
                            <td><span>篮球</span></td>
                        </tr>
                        <tr>
                            <td><span><i class="fa fa-book fa-2x"></i></span></td>
                            <td><span><i class="fa fa-cab fa-2x"></i></span></td>
                        </tr>
                         <tr class="hobby-name">
                            <td><span>阅读</span></td>
                            <td><span>户外</span></td>
                        </tr>
                        <tr>
                            <td><span><i class="fa fa-pencil-square-o fa-2x"></i></span></td>
                            <td><span><i class="fa fa-music fa-2x"></i></span></td>
                        </tr>
                         <tr class="hobby-name">
                            <td><span>写作</span></td>
                            <td><span>音乐</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="education">
            <div class="edu-header"> <i class="fa fa-mortar-board"></i>    教育经历</div>
            <div class="content">
                <p><b>2014.09—2018.6   山西医科大学   信息管理与信息系统专业  </b></p>
                <p>本科期间学习过C语言、Java、Mysql以及其他编程有关知识，和计算机网络和
                    操作系统等网络配置和网络编程等理论知识。去年考研期间进一步学习数据结构
                    和C语言,加深了对链表、树和图的理解。
                </p>
            </div>
        </div>
        <div class="skill">
            <div class="sk-header"><i class="fa fa-wrench"></i>    专业技能</div>
            <div class="content">
                    <p>1、  熟悉python，django框架，能用django框架做基础开发</p>
                    <p>2、  熟悉Windows下python的安装、部署及调试等；</p>
                    <p>3、  能用一般的HTML，CSS，Js等前端技术进行开发，了解bootstrap，ajax.</p>
                    <p>4、  熟悉Mysql，SQLserver, redis，sqlite数据库，熟练Mysql</p>
                    <p>5、  熟练使用Pycharm、sublime、Navicat for mysql等开发工具</p>
                    <p>6、  了解java，C，和php知识</p>
            </div>
        </div>
        <div class="project">
            <div class="pro-header"><i class="fa fa-pencil-square"></i>    项目（科研）经历</div>
            <div class="content">
                <p>2016.9参加全国大学生数学建模竞赛，并获得山西赛区的优秀奖</p>
                <p>2016.10参加名称为《“医”动校园APP》创新创业校级项目,并顺利完成项目。</p>
                <p>2017年12月于《智富时代》杂志发表题为《“医”动校园APP的设计与开发》的论文。</p>
                <p>毕业设计自主开发山西医科大学知识问答平台（django2.0.5+python3.7+mysql5.7）
                  实现登录、退出功能，搜索、提问、回答问题功能，发布，编辑文章功能，给文章留言功能，个人中心可以修改密码，查看提问数、回答数、发布文章数，并可以删除我的提问，重新编辑或删除已发布文章，以及利用django自带admin实现用户，问答和文章的后台管理功能</p>
            </div>
        </div>
        <div class="honor">
            <div class="hon-header"><i class="fa fa-glass"></i>    奖项荣誉</div>
            <div class="content">
                <p>国家计算机二级C语言证书（99分）</p>
                <p>国家计算机三级网络技术证书（87分）</p>
                <p>国家计算机四级网络工程师证书（93分）</p>
                <p>计算机技术与软件专业资格考试（中级网络工程师证书）</p>
                <p>通过了英语四、六级</p>
                <p>2015年12月获院级“优秀学生干部”荣誉证书 </p>
                <p>2017年5月获校级“优秀学生干部”荣誉证书</p>
                <p>2016年上半年获一等奖学金、下半年获三等奖学金</p>
                <p>2017年上半年获一等奖学金</p>
                <p>多次获得国家助学基金</p>
                <p>2017年获山西医科大学校运会4000米接力第八名</p>
            </div>
        </div>
    </div>
</body>
</html>